<template>
	<view class="columnbox wdh-100 content">
		<view class="rowbox wdh-100 tab-box jus">
			<u-tabs @click="statusChange" lineColor="#1E72CA" :list="statusList"></u-tabs>
		</view>
		<view class="wdh-100" style="height: 120rpx;"></view>
		<view class="columnbox wdh-100 s-box" v-for="(item,index) in infolist" :key='index'>
			<view class="rowbox wdh-100 spb als top-box">
				<image mode="aspectFill" class="s-img" :src="items" v-for="(items,indexs) in item.listUrl.split(',')" :key="index">
				</image>
				<view class="columnbox als s-info">
					<view class="rowbox wdh-100 jus">
						<view class="s-name textovflow">{{item.name}}</view>
						<view v-if="item.stationType==0" class="rowbox s-qj">旗舰站</view>
						<view v-else-if="item.stationType==1" class="rowbox s-zz">标准站</view>
						<view v-else-if="item.stationType==2" class="rowbox s-jm">自助站</view>
						<view v-else-if="item.stationType==3" class="rowbox s-zd">自动站</view>
					</view>
					<view class="rowbox wdh-100 spb" style="margin-top: 20rpx;">
						<view class="s-address textovflow" style="width: 370rpx;">{{item.address}}</view>
						<!-- <view class="s-address">1.22KM</view> -->
						<view class="rowbox location-box">
							<image src="/static/img/location.svg"></image>
							导航
						</view>
					</view>
					<view class="rowbox wdh-100 jus" style="margin-top: 10rpx;">
						<view class="s-address">营业状态</view>
						<view class="s-address" style="color: #17698F;margin-left: 20rpx;">
							{{item.openingType==0?'营业中':'维修中'}}
						</view>
					</view>
					<view class="rowbox wdh-100 jus" style="margin-top: 10rpx;">
						<view class="s-address">营业时间</view>
						<view class="s-address" style="margin-left: 10rpx;">
							{{item.businessHours==0?'0:00～24:00':' 8:00～18:00'}}
						</view>
					</view>
				</view>
			</view>
			<view class="wdh-100 rowbox spb">
				<template v-if="item.verifyType==0">
					<view style="font-size: 24rpx;color: #BD3124;">新建洗车站运营审核中</view>
					<view class="rowbox gwgl" @click="showDetail(item)">查看审核进度</view>
				</template>
				<template v-else-if="item.verifyType==2">
					<view style="font-size: 24rpx;color: #BD3124;">新建洗车站审核失败</view>
					<view class="rowbox gwgl" @click="showDetail(item)">查看审核结果</view>
				</template>
				<!-- <template v-else-if="item.verifyType==3"> -->
				<template v-if="curstatus==1">
					<view></view>
					<view class="rowbox">
						<view class="rowbox tjgw" @click.stop="addGongwei(item)">添加工位</view>
						<view class="rowbox scgw" @click="deletGongwei(item)">删除工位</view>
						<view class="rowbox gwgl" @click.stop="gongweiManage(item)">工位管理</view>
					</view>
				</template>
			</view>
		</view>
		<view class="wdh-100" style="height: 200rpx;"></view>
		<view class="rowbox wdh-100 bottom-box">
			<view class="rowbox wdh-100 send-btn" @click="addStation">新增洗车站</view>
		</view>
		<view v-if="total==0">
			<u-empty text="暂无内容"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				infolist: [],
				total: 0,
				refreshflag: false,
				statusList: [{
						name: '运营中'
					},
					{
						name: '审核中'
					}
				],
				curstatus: 1
			};
		},
		onLoad() {
			this.getStation()
		},
		onShow() {
			if (this.refreshflag) {
				this.refreshflag = false
				this.pageNum = 1
				this.infolist = []
				this.getStation()
			}
		},
		onReachBottom() {
			if (this.infolist.length < this.total) {
				this.pageNum++
				this.getStation()
			}
		},
		methods: {
			statusChange(e) {
				switch (e.name) {
					case '运营中':
						this.curstatus = 1
						break;
					case '审核中':
						this.curstatus = 2
						break;
				}
				this.pageNum = 1
				this.infolist = []
				this.getStation()
			},
			deletGongwei(v) {
				uni.navigateTo({
					url: '/packageA/gongwei/delet?id=' + v.stationId +
						'&img=' + v.listUrl +
						'&name=' + v.name +
						'&address=' + v.address
				})
			},
			// 工位管理
			gongweiManage(v) {
				uni.navigateTo({
					url: '/packageA/gongwei/index?id=' + v.stationId
				})
			},
			// 添加工位
			addGongwei(v) {
				uni.navigateTo({
					url: '/packageA/gongwei/add?id=' + v.stationId +
						'&img=' + v.listUrl +
						'&name=' + v.name +
						'&address=' + v.address
				})
			},
			showDetail(v) {
				uni.navigateTo({
					url: './detail?authid=' + v.id
				})
			},
			getStation() {
				let url = ''
				if (this.curstatus == 1) {
					url = '/xcx/manager/station/list'
				} else if (this.curstatus == 2) {
					url = '/xcx/stationVerify/list'
				}
				this.$req.get(url, {
					pageSize: 20,
					pageNum: this.pageNum
				}).then(res => {
					console.log(res)
					this.infolist = this.infolist.concat(res.data.rows)
					this.total = res.data.total
				})
			},
			addStation() {
				uni.navigateTo({
					url: './add'
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.content {
		background: #f7f8fa;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
		width: 100%;
		padding-top: 20rpx;
	}

	.s-box {
		padding: 20rpx 20rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 32rpx;
		width: 710rpx;
		box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);

		.s-img {
			width: 170rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}

		.s-info {
			width: calc(100% - 190rpx);

			.s-name {
				font-size: 28rpx;
				font-weight: bold;
				max-width: 400rpx;

				text {
					color: #1E72CA;
				}
			}
		}

		.s-zz,
		.s-jm,
		.s-zd,
		.s-qj {
			background: rgba(119, 40, 245, 0.28);
			color: #7728F5;
			font-size: 24rpx;
			width: 90rpx;
			height: 40rpx;
			border-radius: 10rpx;
			margin-left: 20rpx;
		}

		.s-jm {
			background: #1E72CA;
			color: #fff;
		}

		.s-zd {
			background: rgba(64, 149, 229, 0.25);
			color: #4095E5;
		}

		.s-qj {
			background: rgba(15, 64, 245, 0.25);
			color: #0F40F5;
		}

		.s-zd-status {
			background: rgba(207, 228, 248, 1);
			border-radius: 10rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;

			.s-zd-status-title {
				background: #1F63FF;
				color: #fff;
				font-size: 24rpx;
				border-radius: 10rpx;
				padding: 4rpx 4rpx;
				line-height: 40rpx;
			}

			.s-zd-status-detail {
				font-size: 22rpx;
				color: #1F63FF;
				padding: 0 10rpx;

				text {
					color: rgba(#1F63FF, 0.5)
				}
			}
		}

		.zz-status {
			background: rgba(119, 40, 245, 0.16);
		}

		.s-address {
			font-size: 24rpx;
			color: #6D6A6B;
		}

		.location-box {
			font-size: 24rpx;
			color: #448DFB;

			image {
				width: 20rpx;
				height: 20rpx;
			}
		}

		.s-serve {
			background: rgba(56, 148, 254, 0.1);
			color: #1E72CA;
			font-size: 24rpx;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
			line-height: 40rpx;
		}

		.s-order-btn {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #fff;
			background: #1E72CA;
			width: 140rpx;
			height: 62rpx;
			border-radius: 10rpx;
		}

		.top-box {
			border-bottom: #EFEFEF solid 1px;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.tjgw,
	.scgw,
	.gwgl {
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		line-height: 32rpx;
		border-radius: 10rpx;
		border: #1F63FF solid 1px;
		color: #1F63FF;
		margin-left: 20rpx;
	}

	.scgw {
		border: #BD3124 solid 1px;
		color: #BD3124;
	}

	.gwgl {
		border: #17698F solid 1px;
		background: #17698F;
		color: #fff;
	}

	.tab-box {
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 9;
		background: #fff;
		height: 100rpx;
	}
</style>